<template>
  <div>
    <div class="row" style="margin-top: 20px">
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        物品种类:
      </div>
      <div class="col-xs-1 text-center"style="font-size: 12px">
        <input type="radio" name="goodsType1" v-model="goodsType" value="证件类" style="margin-top: 25px">&nbsp;&nbsp;&nbsp;证件类
      </div>
      <div class="col-xs-1 text-center"style="font-size: 12px">
        <input type="radio" name="goodsType2" v-model="goodsType" value="眼镜类" style="margin-top: 25px">&nbsp;&nbsp;&nbsp;眼镜类
      </div>
      <div class="col-xs-1 text-center"style="font-size: 12px">
        <input type="radio" name="goodsType3" v-model="goodsType" value="钥匙类" style="margin-top: 25px">&nbsp;&nbsp;&nbsp;钥匙类
      </div>
      <div class="col-xs-2 text-center"style="font-size: 12px">
        <input type="radio" name="goodsType4" v-model="goodsType" value="贵重物品类" style="margin-top: 25px">&nbsp;&nbsp;&nbsp;贵重物品类
      </div>
      <div class="col-xs-1 text-center"style="font-size: 12px">
        <input type="radio" name="goodsType5" v-model="goodsType" value="其他类" style="margin-top: 25px">&nbsp;&nbsp;&nbsp;其他类
      </div>
    </div>

    <div style="border: 1px #E4E4E4 solid;margin-top: 30px"></div>

    <div class="row" style="margin-top: 20px">
      <div class="col-xs-2 text-right"  style="font-size: 20px;font-weight: bold;margin-top: 10px">
        物品名称:
      </div>
      <div class="col-xs-3">
        <div class="form-group">
          <input type="text" class="form-control" id="goodsName" v-model="goodsName" style="height: 30px;width: 250px;margin-top: 10px"
                 placeholder="请输入名称">
        </div>
      </div>
      <div class="col-xs-3">
        <span class="glyphicon glyphicon-exclamation-sign" style="padding-top: 15px;margin-top: 5px">&nbsp;请输入物品名称</span>
      </div>
    </div>

    <div class="row" style="margin-top: 10px">
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        物品特征描述:
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <textarea type="text" id="goodsDescribe" v-model="goodsDescribe" class="form-control"
                    style="height: 150px;width: 450px;margin-top: 10px" placeholder="请输入物品详细特征">
          </textarea>
        </div>
      </div>
      <div class="col-xs-2" style="margin-top: 10px">
        <span class="glyphicon glyphicon-exclamation-sign" style="padding-top: 15px;margin-top: 5px">&nbsp;
          请输入丢失物品的详细特征描述以及物品的丢失过程!实践证明，信息描述越详细找回的几率更大。描述信息长度10~1000个汉字。
        </span>
      </div>
    </div>

    <div class="row" style="margin-top: 10px">
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        上传照片:
      </div>
      <el-upload
        class="upload-demo"
        action="agent/file/upload"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <div class="col-xs-2">
        <span class="glyphicon glyphicon-exclamation-sign" style="padding-top: 23px">&nbsp;仅支持图片上传</span>
      </div>
    </div>


    <div class="row" style="margin-top: 20px">
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        拾取时间:
      </div>
      <div class="col-xs-3">
        <div class="block">
          <span class="demonstration">默认</span>
          <el-date-picker
            v-model="time"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </div>
      <div class="col-xs-1 text-center">
        <span class="glyphicon glyphicon-exclamation-sign" style="padding-top: 20px"></span>
      </div>
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        拾取地点:
      </div>
      <div class="col-xs-3">
        <div class="form-group">
          <input type="text" id="place" v-model="place" class="form-control text-center" style="height: 30px;width: 280px;margin-top: 10px"
                 placeholder="请输入拾取遗失的地点">
        </div>
      </div>
      <div class="col-xs-1 text-center">
        <span class="glyphicon glyphicon-exclamation-sign" style="padding-top: 20px"></span>
      </div>
    </div>

    <div class="row" style="margin-top: 20px">
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        拾取人姓名:
      </div>
      <div class="col-xs-1">
        <div class="form-group">
          <input type="text" id="name" v-model="name" class="form-control text-center" style="height: 30px;width: 130px;margin-top: 10px"
                 placeholder="请输入姓名">
        </div>
      </div>
      <div class="col-xs-1 text-right">
        <span class="glyphicon glyphicon-star-empty" style="padding-top: 20px"></span>
      </div>
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        拾取人学号:
      </div>
      <div class="col-xs-1">
        <div class="form-group">
          <input type="text" id="majorAndClass" v-model="userid" class="form-control text-center" style="height: 30px;width: 130px;margin-top: 10px"
                 placeholder="请输入学号">
        </div>
      </div>
      <div class="col-xs-1 text-right">
        <span class="glyphicon glyphicon-star-empty" style="padding-top: 20px"></span>
      </div>
      <div class="col-xs-2 text-right" style="font-size: 20px;font-weight: bold;margin-top: 10px">
        请输入联系方式:
      </div>
      <div class="col-xs-1">
        <div class="form-group">
          <input type="text" id="tel" v-model="tel" class="form-control text-center" style="height: 30px;width: 130px;margin-top: 10px"
                 placeholder="请输入联系方式">
        </div>
      </div>
      <div class="col-xs-1 text-right">
        <span class="glyphicon glyphicon-star-empty" style="padding-top: 20px"></span>
      </div>
    </div>

    <div class="row" style="margin-top: 40px">
      <div class="col-xs-12 text-center">
        <button v-on:click="adddata" type="submit" class="btn btn-primary" style="background-color: #286090;width: 130px;font-size: 20px;font-weight: bold;">
          完&nbsp;&nbsp;成
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "registerPage",
    data (){
      return {
        type:"招领启事",
        src:'',
        userid:"",
        goodsType:'',
        goodsName:'',
        goodsDescribe:'',
        time:'',
        place:'',
        name:'',
        tel:'',
        fileList: []
      }
    },
    methods:{
      success(resp, file, fileList){
        this.src=resp
        console.log(resp)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      adddata:function () {
        if(this.goodsType==''){
          alert('请选择物品种类');
          return;
        }
        if (this.goodsName==''){
          alert('请输入物品名称');
          return;
        }
        if (this.goodsDescribe==''){
          alert('请输入物品特征');
          return;
        }
        if (this.goodsDescribe.length<10){
          alert('物品特征不能少于10个字');
          return;
        }
        if (this.goodsDescribe.length>1000){
          alert('物品特征不能大于1000字');
          return;
        }
        if (this.time==''){
          alert('请输入拾取时间');
          return;
        }
        if (this.place==''){
          alert('请输入拾取地点');
          return;
        }
        axios.get(this.rootUrl+"/lostproperty/FoundInsert",{
          params:{
            src:this.src,
            type:this.type,
            userId:this.userid,
            lostPropertyName:this.goodsName,
            descript:this.goodsDescribe,
            time:this.time,
            location:this.place,
            divid:this.goodsType,
            username:this.name,
            tel:this.tel
          }

        })
          .then(function (resp) {
            console.log(resp)
          })
      }
    }
  }
</script>

<style scoped>

</style>
